<template lang='pug'>
  div.nav
    div.box
      div.item(:class="{on:'/' === $route.path}" @click="change(0)")  Home 
      div.item(:class="{on:'/about' === $route.path}" @click="change(1)")  About
      div.item(:class="{on:'/find' === $route.path}" @click="change(2)") Find
      div.item(:class="{on:'/mine' === $route.path}" @click="change(3)") Mine
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {},
  data(){
    return{
    }
  },
  methods:{
    change(e){
      e==0&&this.$router.push('/');
      e==1&&this.$router.push('/about');
      e==2&&this.$router.push('/find');
      e==3&&this.$router.push('/mine');
    }
  }
}
</script>

<style scoped lang="less">
.box{
  width:7.5rem;
  height: 0.88rem;
  display: flex;
  align-items: center;
  border-top: 1px solid #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
}
.item{
  flex: 1;
  font-size: 0.32rem;
}
.on{
  color: #ff7000;
}
</style>
